<template>
  <div class="displayArticle" style="width: 1272px;text-align: center;height: 800px">
<!--    文章标题-->
    <h1 align="center" style="padding-top: 100px;" >{{article.title}}</h1>
<!--信息栏-->
    <!--文章作者id-->
    <h2 style="padding-left: 300px" align="left" >文章作者id: {{article.authorId}} </h2>
    <!--创建时间-->
    <h4 style="padding-left: 300px" align="left">创建时间: {{article.createDate}}</h4>
    <!--浏览数量-->
    <h4 style="padding-left: 300px" align="left">浏览数量: {{article.viewCounts}}</h4>
    <br/>
    <br/>
<!--    文章内容-->
    <div style="position: center">
      <!--文章内容-->
      <h5>{{article.articleBody}}</h5>

      <!--文章图片-->
      <img
          :src=getImgUrl(article.coverImage)
          style="padding: 500px;padding-top: 20px;padding-bottom: 10px"
          class="image"
      />
      <br/>
      <br/>
    </div>

<!--    文章评论-->
    <div style="background-color: lightgray">
      <h1 style="padding-left: 100px;text-align: left">评论：</h1>
      <!--文章所有评价-->
      <div v-for = "(item,index) in commentList" style="text-align: left;padding-left: 200px">
        <h3  style="display: inline">{{item.userId}}&nbsp;</h3><h6 style="display: inline">{{item.commentDate}}</h6>&nbsp;: &nbsp;&nbsp;  {{item.commentBody}}
      </div>
      <!--写评价区域-->
      <div>
        <el-input
            v-model="commentInput"
            maxlength="30"
            placeholder="Please input"
            show-word-limit
            type="text"
            style="width: 800px;padding-left: 50px;text-align: left"
        /><el-button @click="submitComment">发表评论</el-button>
      </div>
    </div>

  </div>
</template>

<script>

import router from "@/router";
import request from "@/utils/request";

export default {
  name: "displayArticle",

  data(){
    return{
      user:{},
      article:{},
      commentList:[],
      commentInput:''
    }
},

  setup(){
      console.log(router.currentRoute.value.query)
  },

  created() {
    this.load()
  },


  methods:{
    load(){
      // console.log(router.currentRoute.value.query.articleId)
      let articleId=router.currentRoute.value.query.articleId
      // 获取指定文章和获取指定文章的评论
      request.get("/articles/articleSelectByArticleId/"+articleId).then(res => {
        console.log(res.data)
        if (res.data == 500) {
          alert("用户id返回错误,返回最新文章页面!")
          router.push("/NowView")
        } else {
          this.article=res.data
          this.commentList=res.data.commentList
        }
      })
    },

    getImgUrl(image){
      if (image==null){
        return "http://192.168.10.100:8888/articleimages/defualt.jpg"
      }
      return "http://192.168.10.100:8888/articleimages/"+image
    },

    submitComment(){
      //提交评论
    }
  }
}
</script>

<style>
.displayArticle{
  background-color: white;
}
</style>